<template>
    <div id="currentPosition">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="panel panel-default" id="cur-list">
                        <div class="panel-heading">
                            <h4>Hiring Positions</h4>
                            <router-link to="/newposition">
                                <el-button id='cur-list-new-post' icon="edit">Post New Position</el-button>
                            </router-link>
                        </div>
                        <div class="panel-body">
                            <div class="cur-list-position" v-for="position in positions">
                                <position-item :position="position"
                                               type="current"
                                               v-on:reloadList="reloadList">
                                </position-item>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Ckeditor from './components/ckeditor.vue'
    import { Loading } from 'element-ui';
    import PositionItem from './components/PositionItem.vue'
    export default {
        name: 'currentPosition',
        data: function () {
            return {
                content: 'asd',
                positions: [],
                loading: Loading.service({ fullscreen: true, text: 'Loading' })
            }
        },
        components: {
            PositionItem
        },
        created () {
            this.getData()
        },
        methods: {
            getData () {
                this.getCurPositions(this, (data) => {
                    this.positions = _.orderBy(data, 'updated_at', 'desc')
                    this.loading.close()
                })
            },
            reloadList () {
                this.loading = Loading.service({ fullscreen: true, text: 'Loading' })
                this.getData()
            }
        },
        mounted () {
            let clipboard = new Clipboard('.cur-list-sharing-content-icon');
            clipboard.on('success', function(e) {
                console.log(e);
            });
            clipboard.on('error', function(e) {
                console.log(e);
            });
        }
    }
</script>

<style rel="stylesheet/scss" lang="sass" scoped>
    h4 {
        display: inline-block;
    }


    #cur-list {
        &-new-post {
            float: right;
        }

        a {
            color: black;
            font-size: 1.3em;
        }
    }

    .cur-list {
        &-icon {
            float: right;
            width: 2em;
            font-size: 1em;
        }
        &-icon:hover {
            cursor: pointer;
            color: #2CA2FC;
        }
        &-position {
            position: relative;

            &-underline {
                border-bottom: 1px solid #D3E0E9;
                width: 90%;
                margin-left: 5%;
                margin-bottom: 1em;
                margin-top: 1em;
                opacity: .5;
            }
        }

    }
</style>
